<template>
	<view class="login_main">
		<app-header :title="['','注册','重置密码','','绑定账号'][type]"></app-header>
		<view class="logo flex-c">
			<u-image src="/static/images/logo.png" mode="aspectFit" width="430rpx" height="430rpx"></u-image>
		</view>
		<view class="input">
			<input v-model="form.account" placeholder="手机号码" />
			<!-- <u--input placeholder="手机号码" border="none" v-model="form.account" clearable></u--input> -->
		</view>
		<view class="input flex-s">
			<input v-model="form.code" placeholder="验证码" />
			<!-- 		<u-input placeholder="验证码" border="none" v-model="form.code" clearable>
				<template slot="suffix"> -->
			<view class="code_btn flex-c" @click="getCode()" v-if="time==0">获取验证码</view>
			<view class="code_btn flex-c disabled" v-else>{{time}}秒后重新获取</view>
			<!-- 		</template>
			</u-input> -->
		</view>
<!-- 		<view class="input flex-s">
			<input v-model="form.password" placeholder="密码" :password="!showPwd" :class="[form.password.length>0&&android&&!showPwd?'android':'']"/>
			<u-image :src="showPwd?'/static/images/show.png':'/static/images/hide.png'" mode="aspectFit" width="48rpx"
				height="48rpx" @click="showPwd=!showPwd"></u-image>
 
		</view> -->
		<view class="forget"></view>
		<view class="btn" @click="reg">下一步</view>
<!-- 		<view class="btn" @click="reg" v-if="type==1">注册</view>
		<view class="btn" @click="resetPwd" v-if="type==2">重置密码</view>
		<view class="btn" @click="bindAccount" v-if="type==4">绑定账号</view> -->
	<!-- 	<view class="port flex-c">
			<u-checkbox-group v-model="isRead" shape="circle" activeColor="#0055A6">
				<u-checkbox label="请阅读并同意" name="请阅读并同意">
				</u-checkbox>
			</u-checkbox-group>
			<view class="port_t" @click="$func.navigateTo" :data-url="'/pages/common/agreement'">《用户服务协议》</view>
		</view> -->
	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	import { setToken } from '@/utils/auth'
	import moment from "moment"
	var timer = null
	export default {
		components: {

		},
		data() {
			return {
				android:systemInfo.platform == 'android',
				isRead: [],
				form: {
					password:""
				},
				info: {},
				sending: false,
				time: 0,
				showPwd: false,
				type: 0,
				weChatCode: "",
				loading: false
			}
		},

		onBackPress(event) {

		},

		onLoad(options) {
			const time = uni.getStorageSync('time') || 0
			const cutTime =  Number(time) - moment().unix()
			this.time = cutTime>0?cutTime:0
			this.type = options.type
			if (this.time > 0) {
				this.codeLast()
			}
			this.getWeChatCode()
		},
		methods: {
			getWeChatCode() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						if (loginRes.errMsg == "login:ok") {
							this.weChatCode = loginRes.code
						} else {
							uni.showToast({ title: "授权失败，稍后重试", icon: 'none' });
						}
					}
				});
			},
			getCode() {
				if(this.time>0) {
					return
				}
				this.time = 60
				uni.setStorageSync('time', moment().unix()+60)
				this.$http.get('/captchaSms', {
					// type: this.type,
					phonenumber: this.form.account
				}).then(res => {
					uni.showToast({
						title: "发送成功",
						duration: 2000
					});
					this.codeLast()
				}).catch(e => {
					uni.setStorageSync('time', null)
					this.time = 0
				})
			},
			codeLast() {
				timer && clearInterval(timer)
				timer = setInterval(() => {
					if (this.time <= 0) {
						// uni.getStorageSync('time', 0)
						clearInterval(timer)
					} else {
						this.time = this.time - 1
						// uni.setStorageSync('time', this.time)
					}
				}, 1000)
			},
			getUserProfile: function(e) {
				let _this = this
				uni.getUserInfo({
					lang: "zh_CN",
					desc: 'Wexin', // 这个参数是必须的
					withCredentials: true,
					success: res => {
						_this.info.iv = res.iv
						_this.info.encryptedData = res.encryptedData
						_this.submit()
					}
				})
			},
			close() {
				this.$emit('login', {})
			},
			reg() {
				if (this.loading) {
					return
				}
		 
				if (!this.form.account) {
					uni.showToast({
						title: "请输入手机号码",
						duration: 2000
					});
					return
				}
				if (!this.form.code) {
					uni.showToast({
						title: "请输入验证码",
						duration: 2000,
						icon: "none"
					});
					return
				}
				this.$func.toUrl('/pages/login/forget?username'+this.form.account+"&code="+this.form.code)
				this.loading = false
			},
			bindAccount() {
				if (this.loading) {
					return
				}
				if (this.isRead.length == 0) {
					uni.showModal({
						title: '提示',
						content: '请阅读并同意《用户服务协议》',
						success: (res) => {
							if (res.confirm) {
								this.isRead = ["请阅读并同意"]
							} else if (res.cancel) {

							}
						}
					});
					return
				}
				if (!this.form.account) {
					uni.showToast({
						title: "请输入手机号码",
						duration: 2000,
						icon: "none"
					});
					return
				}
				if (!this.form.code) {
					uni.showToast({
						title: "请输入验证码",
						duration: 2000,
						icon: "none"
					});
					return
				}
				if (!this.form.password) {
					uni.showToast({
						title: "请输入密码",
						duration: 2000,
						icon: "none"
					});
					return
				}
				this.loading = true
				this.$http.post("/user/account/wxBindAndLogin", { ...this.form, weChatCode: this.weChatCode }).then(
					res => {
						uni.showToast({
							title: "绑定成功",
							duration: 2000
						});
						setToken(res.data.token)
						this.$store.commit('SET_TOKEN', res.data.token)
						this.$store.dispatch("GetInfo")
						uni.redirectTo({
							url: "/pages/index/index"
						})
						this.loading = false
					}).catch(res => {
					this.loading = false
					this.getWeChatCode()
				})
			},
			resetPwd() {
				if (this.loading) {
					return
				}
				if (this.isRead.length == 0) {
					uni.showModal({
						title: '提示',
						content: '请阅读并同意《用户服务协议》',
						success: (res) => {
							if (res.confirm) {
								this.isRead = ["请阅读并同意"]
							} else if (res.cancel) {

							}
						}
					});
					return
				}
				if (!this.form.account) {
					uni.showToast({
						title: "请输入手机号码",
						duration: 2000
					});
					return
				}
				if (!this.form.code) {
					uni.showToast({
						title: "请输入验证码",
						duration: 2000
					});
					return
				}
				if (!this.form.password) {
					uni.showToast({
						title: "请输入密码",
						duration: 2000
					});
					return
				}
				this.loading = true
				this.$http.post("/user/account/forgotPassword", { ...this.form, weChatCode: this.weChatCode }).then(
					res => {
						uni.showToast({
							title: "重置成功",
							duration: 2000
						});
						uni.redirectTo({
							url: "/pages/login/index"
						})
						this.loading = false
					}).catch(res => {
					this.loading = false
					this.getWeChatCode()
				})
			}


		},
		onPullDownRefresh() {

		},
		onReachBottom() {


		}
	}
</script>

<style scoped lang="scss">
	.login_main {
		background-color: #fff;
		padding: 24rpx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		display: flex;

		.logo {
			width: 430rpx;
			height: 430rpx;
		}

		.input {
			padding: 24rpx;
			border-bottom: 1px solid #EDEDED;
			width: calc(100% - 60rpx);
			margin: 0 30rpx;

			input {
				flex: 1;
				height: 64rpx;
				font-size: 30rpx;
				&.android {
					font-size: 20rpx;
				}
			}

			::v-deep input {
				height: 64rpx;
				font-size: 30rpx;
				&.android {
					font-size: 20rpx;
				}
			}
		}

		.forget {
			font-weight: 500;
			color: #0055A6;
			text-align: right;
			font-size: 24rpx;
			margin-bottom: 149rpx;
			width: 100%;
		}

		.btn {
			width: 540rpx;
			height: 88rpx;
			background: #0055A6;
			border-radius: 24rpx;
			border: 1px solid #0055A6;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			align-items: center;
			justify-content: center;
			display: flex;
			margin: 0 auto 32rpx;

			&.reg {
				background: #FFFFFF;
				color: #0055A6;
			}
		}

		.login {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999999;
			line-height: 28rpx;
		}

		button {
			background-color: rgba(0, 0, 0, 0);
			display: flex;
			justify-content: center;
			align-items: center;
			border-color: transparent;
			border-style: none;
			// background: rgba(24, 139, 126, 1);

			font-size: 28rpx;
			line-height: 28rpx;
			color: #999999;
		}

		button::after {
			border: none;
		}



	}

	.code_btn {
		min-width: 208rpx;
		height: 65rpx;
		background: #0055A6;
		border-radius: 33rpx;
		color: #fff;
		padding: 0 20rpx;

		&.disabled {
			background: #EFEFEF;
			color: #999999;
		}
	}

	.port {
		margin-top: 38rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;

		.port_t {
			color: rgb(41, 121, 255);
		}
	}
</style>